<template>
	<view class="container">
		<z-paging ref="paging" v-model="orderData" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" @query="queryList">
			<view style="z-index: 100;position: sticky;top :0; background: #fff;">
				<z-tabs @change="changeTabs" :list="tabsList" active-color='var(--echo-main-color)'></z-tabs>
			</view>
			<!-- tabs内容展示区域 -->
			<BsinOrderCard v-for="(item, index) in orderData" :key="index" :item="item" @toDetail="goToDetail">
			</BsinOrderCard>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
						name: '全部',
					}, {
						name: '待支付',
					},
					{
						name: '已完成',
					}, {
						name: '已取消',
					}
				],
				// tabs下标
				tabsIndex: 0,
				// 订单数据源
				orderData: [],
				orderMockList: [{
						cover: '../../static/images/nft/daoLogo2.jpg',
						title: 'Azuki',
						time: '2022-1-1',
						price: '100',
						amount: 1
					},
					{
						cover: '../../static/images/nft/nft3.png',
						title: '烤仔城市系列',
						time: '2022-1-1',
						price: '1.00',
						amount: 1
					},
					{
						cover: '../../static/images/nft/nft10.png',
						title: '烤仔城市系列',
						time: '2022-1-1',
						price: '6.00',
						amount: 1
					},
				]
			}
		},
		methods: {
			changeTabs(
				index
			) {
				this.tabsIndex = index
				this.$refs.paging.reload()
			},

			// 查看订单详情
			goToDetail() {
				uni.navigateTo({
					url: "/pages/My/MyOrderDetail"
				})
			},

			queryList(pageNo, pageSize) {
				if (this.tabsIndex == 0) {
					this.$refs.paging.complete(this.orderMockList);
				}
				if (this.tabShowType == 1) {

				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		margin: 0 30rpx;
	}
</style>
